<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Order Management System</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

</head>
<body>
<div class="container my-2">
  <h1 class="text-center" style="color: #000000;">Order Management System</h1>

  <hr>
  <h2 style="text-align: center; color: #000000;">Update Order</h2>
  <form action="#" th:action="@{/saveOrders}" th:object="${orders}" method="POST">

    <!-- Add hidden form field to handle update -->
    <input type="hidden" th:field="*{id}"/>

    <input type="text" th:field="*{orderID}" placeholder="orderID" class="form-control mx-auto mb-4 col-4" style="border: 1px solid #000000">

    <input type="text" th:field="*{time}" placeholder="orderID" class="form-control mx-auto mb-4 col-4" style="border: 1px solid #000000">

    <input type="text" th:field="*{consignee}" placeholder="consignee" class="form-control mx-auto mb-4 col-4" style="border: 1px solid #000000">

    <input type="text" th:field="*{addr}" placeholder="addr" class="form-control mx-auto mb-4 col-4" style="border: 1px solid #000000">

    <input type="text" th:field="*{status}" placeholder="status" class="form-control mx-auto mb-4 col-4" style="border: 1px solid #000000">

    <div style="display: flex; justify-content: center; align-items: center;">
      <button type="submit"  class="btn btn-info col-2"> Update Orders</button>
    </div>
  </form>
  <hr>

  <div style="display: flex; color: #000000; justify-content: center; align-items: center;">
    <a th:href="@{/}" style="text-align: center;">Back to Orders List</a>
  </div>

</div>
</body>
</html>